﻿<!DOCTYPE html>
<html>
<head>
	<title>onyx groupbox sample</title>
	<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
	<script src="../../../onyx/package.js" type="text/javascript"></script>
</head>
<body>
	<script>
		new (enyo.kind({
			name: "App",
			kind: "Control",
			style: "padding: 10px;",
			components: [
				{kind: "onyx.Groupbox", components: [
					{content: "I'm a group item!"},
					{content: "I'm a group item!"}
				]},
				{tag: "br"},{tag: "br"},
				//
				{kind: "onyx.Groupbox", components: [
					{kind: "onyx.GroupboxHeader", content: "Header"},
					{content: "I'm a group item!"},
					{content: "I'm a group item!"}
				]},
				{tag: "br"},{tag: "br"},
				//
				{kind: "onyx.Groupbox", components: [
					{kind: "onyx.GroupboxHeader", content: "Header"},
					{kind: "onyx.InputDecorator", components: [
						{kind: "onyx.Input", attributes: {placeholder: "Enter text here"}},
					]},
					{kind: "onyx.InputDecorator", components: [
						{kind: "onyx.Input", value: "Middle"},
					]},
					{content: "I'm a colored group item!", style: "background: tan;"},
					{kind: "onyx.InputDecorator", components: [
						{kind: "onyx.Input", value: "42"},
					]},
				]},
				{tag: "br"},{tag: "br"},
				//
				{kind: "onyx.Groupbox", components: [
					{kind: "onyx.InputDecorator", components: [
						{kind: "onyx.Input", attributes: {placeholder: "Enter text here"}},
					]},
					{kind: "onyx.InputDecorator", components: [
						{kind: "onyx.Input", value: "Middle"},
					]},
					{kind: "onyx.InputDecorator", components: [
						{kind: "onyx.Input", value: "42"},
					]}
				]}
			]
		}))().write();
	</script>
</body>
</html>
